<template>
	<div class="active">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					
				</div>
				<div class="add">
					登录
				</div>
				<div>
				</div>
			</div>

		</div>
		<div class="lists">
              <div class="logo flex">
              	<img src="../assets/image/logo.png"/>
              </div>
			  <div class="inp">
			  	<p>手机号</p>
			  	<input type="text" v-model="phone" placeholder="请输入手机号"/>
			  </div>
			   <div class="inp">
			  	<p>密码</p>
			  	<input type="password" v-model="passwords" placeholder="请输入密码"/>
			  </div>
			  <div class="btns" @click="login">
			  	登录
			  </div>
              <div class="skip flex">
              	<div @click="skipto_register">
              		注册
              	</div>
              	
              </div>
			</div>
		</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				phone:"",
				passwords:""
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {
    if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
				var appid = 'wxa69169646c06b0f6';
				var uricode = encodeURIComponent(this.baseURL+'/index.php/waveguest/login/getUserOpentId');
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + uricode + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';		       
		}else{
			 this.$message.error('请使用微信浏览器登录哦~');
		}
		},
		methods: {
			
			login() {
			var that = this;
					localStorage.setItem("phone",that.phone)
			var str = /^1[3|5|4|8|7|9]\d{9}$/
			var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/; 
			
			if(str.test(that.phone)) {} else {
				 this.$message.error('请输入正确手机号');
        
				return;
			}
			
			if(that.passwords) {} else {
				 this.$message.error('密码不能为空');
				return;
			}
			if(reg.test(that.passwords)) {} else {
				 this.$message.error('密码为6-20的数字和字母组成');
        
				return;
			}
			
			
			var qs = require('qs');
			that.$http.post("http://api.heruinet.com/index.php/waveguest/login/sms_send", qs.stringify({
						"store_mobile": that.passwords,
					})).then(response => {
						console.log(response)
						
						
					})
					.catch(error => {

					});
			
			
			
			

		},
			
			
			
			
			
		
			skipto_register() {
				this.$router.push({
					path: '/register'
				});
			},
			
			
			
		},
		mounted() {

		},
	}
</script>

<style>
.el-message {
    min-width: 4rem;
    top: 40% !important;
}
</style>
<style scoped="scoped">
	.active {
		position: fixed;
		top: 0;
		width: 100%;
		max-width: 640px;
		height: 100%;
	}
	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.lists {
		padding: 2rem ;

	}

	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}
	
	.title div {
		width: calc(100%/3);
		align-items: center;
	}
	
	.title>div:nth-child(2) {
		text-align: center;
	}
	.logo img{
		width: 3.65217rem;
		height: 3.65217rem;
	}
	.logo{
		justify-content: center;
		align-items: center;
	}
	.inp{
		padding-top: 1rem ;
	}
	.inp>p{
		color: #D1D5D8;
		font-size: 0.562517rem;
		padding-bottom: 0.5rem;
	}
	.inp>input{
		width: 100%;
		height: 1.5rem;
		border: none;
		border-bottom: 1px solid gray; 
		font-size: 0.65217rem;
	}
	.btns{
		width: 100%;
		height: 2.1913rem;
		background:#007AFF;
		border-radius: 0.47826rem;
		text-align: center;
		line-height: 2.3913rem;
		color: white;
		font-size: 0.7826rem;
		margin-top: 1.3043rem;
	}
	.skip{
		padding: 1rem 0.5rem;
		justify-content: space-between;
		font-size: 0.60869rem;
		color: #3E474E;
	}
	
	
	
</style>